<template>
    <div v-if="show" class="mark">
        <teleport to="body">
            <div class="modal">
                <h1>标题</h1>
                <p>内容</p>
                <button>确认</button>
                <button @click="close">关闭</button>
            </div>
        </teleport>
    </div>
</template>

<script>
    import {toRef} from 'vue'

    export default {
        name: "Modal",
        props: ['visible'],
        emits: ['close'],
        setup(props, context) {
            const show = toRef(props, 'visible')

            // 关闭弹框
            const close = () => {
                context.emit('close')
            }

            return {
                show,
                close
            }
        }
    }
</script>

<style scoped>

    .mark {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0, 0, 0, 0.618);
    }

    .modal {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        background-color: white;
        width: 300px;
        height: 200px;
        margin: auto;
        border-radius: 7px;
        border: solid 1px #666;
    }
</style>
